<template>
    <div class="AdminHome">
     <el-scrollbar class="main-scrollbar">
            <div class="content-wrapper">
                <header>
                    <div class="module">
                        <div class="module_icon">
                            <img src="@/assets/images/deviceNum.png" />
                        </div>
                        <div class="module_text">
                            <el-text type="info">{{ $t("message.access_device") }}</el-text>
                            <span>{{ module_num }}</span>
                        </div>
                    </div>
                    <div class="module">
                        <div class="module_icon">
                            <img src="@/assets/images/error.png" />
                        </div>
                        <div class="module_text">
                            <el-text type="info">{{ $t("message.error_device") }}</el-text>
                            <span>0</span>
                        </div>
                    </div>
                    <div class="module">
                        <div class="module_icon">
                            <img src="@/assets/images/user.png" />
                        </div>
                        <div class="module_text">
                            <el-text type="info">{{ $t("message.openSms") }}</el-text>
                            <span>{{ store.AableSendMsgNum }}</span>
                        </div>
                    </div>
                    <div class="module">
                        <div class="module_icon">
                            <img src="@/assets/images/errorNum.png" />
                        </div>
                        <div class="module_text">
                            <el-text type="info">{{ $t("message.monitoring") }} </el-text>
                            <span>{{ user_store.deviceList.length }}</span>
                        </div>
                    </div>
                </header>
                <!-- 主体部分 -->
                <el-container>
                    <el-row :gutter="10">
                        <el-col :span="9">
                            <el-card>
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ $t("home.realError") }}</span>
                                    </div>
                                    <!-- 实时报警提醒 -->
                                </template>
                                <scrollTable></scrollTable>
                            </el-card>
                        </el-col>
                        <el-col :span="15">
                            <el-card>
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ $t("home.alarm_record") }}</span>
                                    </div>
                                </template>
                                <div class="Alarm_statistics">
                                    <div class="new-chart-layout">
                                        <!-- 传感器图例区域 -->
                                        <div class="sensor-legend-horizontal">
                                            <div v-for="sensor in sensorTypes" :key="sensor.id"
                                                class="sensor-legend-item"
                                                :class="{ active: selectedSensor.id === sensor.id }"
                                                @click="selectSensor(sensor)">
                                                <div class="sensor-color-dot"
                                                    :style="{ backgroundColor: sensor.color }"></div>
                                                <span class="sensor-label">{{ sensor.name }}</span>
                                            </div>
                                        </div>
                                        <!-- 柱状图区域 -->
                                        <div class="chart-main-area" style="height: 300px; width: 100%;" id="pieRef">
                                            <div class="echart_col" ref="colRef" style="height: 100%; width: 100%;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="10" style="margin-top: 10px;">
                        <!-- 主机报警统计 -->
                        <el-col :span="9">
                            <el-card>
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ $t("home.alarm_sort") }}</span>
                                    </div>
                                </template>
                                <sort />
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="consistent-height-card" id="function-guide-card">
                                <template #header>
                                    <div class="card-header">
                                        <span>{{ $t("home.function") }}</span>
                                    </div>
                                </template>
                                <div class="chart-grid myself-chart">
                                    <div class="host-item" v-for="i in tourList" :key="i.id" @click="checkTarget(i)">
                                        <div class="img-icon">
                                            <el-icon color="#fff" size="30px">
                                                <component :is="i.icon" />
                                            </el-icon>
                                        </div>
                                        <!-- 主机的名称 -->
                                        <p class="host_name">{{ $t(i.name) }}</p>
                                        <!-- 主机包容了几个监测点 -->
                                        <p class="host_num">
                                            {{ $t('home.click') }}
                                        </p>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="7">
                            <el-card class="todo consistent-height-card">
                                <template #header>
                                    <div class="card-header">
                                        <el-input id="el_input" style="height: 100%;" v-model="todoKeyword"
                                            :placeholder="$t('home.taskList')" @keyup.enter="addTodo"></el-input>
                                    </div>
                                </template>
                                <main class="todoList">
                                    <el-empty description="暂无待办" v-if="todoList.length === 0" />
                                    <ul class="todo" v-else>
                                        <el-scrollbar>
                                            <el-table v-if="todoType === 'home.all'" :data="getAllTodoList"
                                                :show-header="false">
                                                <el-table-column type="done" width="30">
                                                    <template #default="scope">
                                                        <el-checkbox v-model="scope.row.done"
                                                            @change="changeCheck(scope.row.id, scope.row.done)"></el-checkbox>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="title"></el-table-column>
                                                <el-table-column width="60">
                                                    <template #default="scope">
                                                        <el-button type="text"
                                                            @click="removeTodo(scope.row.id)">{{ $t("home.del") }}</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <el-table v-else-if="todoType === 'home.uncompleted'"
                                                :data="getUnDoneTodoList" :show-header="false">
                                                <el-table-column type="done" width="30">
                                                    <template #default="scope">
                                                        <el-checkbox v-model="scope.row.done"
                                                            @change="changeCheck(scope.row.id, scope.row.done)"></el-checkbox>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="title"></el-table-column>
                                                <el-table-column width="60">
                                                    <template #default="scope">
                                                        <el-button type="text"
                                                            @click="removeTodo(scope.row.id)">{{ $t("home.del") }}</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <el-table v-else :data="getDoneTodoList" :show-header="false">
                                                <el-table-column type="done" width="30">
                                                    <template #default="scope">
                                                        <el-checkbox v-model="scope.row.done"
                                                            @change="changeCheck(scope.row.id, scope.row.done)"></el-checkbox>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="title"></el-table-column>
                                                <el-table-column width="60">
                                                    <template #default="scope">
                                                        <el-button type="text"
                                                            @click="removeTodo(scope.row.id)">{{ $t("home.del") }}</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-scrollbar>
                                    </ul>
                                </main>
                                <template #footer>
                                    <div id="todo_footer">
                                        <aside id="todo_num">
                                            {{ $t(todoType) }} --
                                            <span size="large" v-if="todoType == 'home.all'">{{ todoList.length
                                                }}</span>
                                            <span size="large" v-if="todoType == 'home.finish'">{{
                                                getDoneTodoList.length }}</span>
                                            <span size="large" v-if="todoType == 'home.uncompleted'">{{
                                                getUnDoneTodoList.length }}</span>
                                        </aside>
                                        <aside>
                                            <el-button text type="primary" @click="queryTodo(0)" :class="{ 'is-active': todoType === 'home.all' }">{{ $t("home.all")
                                                }}</el-button>
                                            <el-button text type="warning" @click="queryTodo(1)" :class="{ 'is-active': todoType === 'home.uncompleted' }">{{
                                                $t("home.uncompleted") }}</el-button>
                                            <el-button text type="success" @click="queryTodo(2)" :class="{ 'is-active': todoType === 'home.finish' }">{{ $t("home.finish")
                                                }}</el-button>
                                        </aside>
                                    </div>
                                </template>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-container>
            </div>

            <!-- 系统指导 -->
            <el-dialog v-model="open" :title="title" width="30%">
                <span>{{ description }}</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button type="primary" @click="open = false">
                            明白
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </el-scrollbar>
    </div>


 </template>
 
 <script setup lang="ts">
defineOptions({
    name: "AdminIndex"
})
import sort from '@/components/sort/index.vue'
import { ref, onMounted, reactive, getCurrentInstance, onActivated, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { Warning, TrendCharts, Histogram, List } from '@element-plus/icons-vue'
import { adminStore } from '../../store/admin'
import { userStore } from '../../store/user'
let user_store = userStore()
let store = adminStore()
let { proxy }: any = getCurrentInstance()
let currentName = ref<string>('温度') // 当前设备的名称
let currentId = ref<number>(3)

// 传感器类型配置
const sensorTypes = ref([
    {
        id: 3,
        name: "温度",
        color: "#ff6b6b",
        icon: "el-icon-thermometer",
        alarmType: "温度告警",
        apiType: 0
    },
    {
        id: 4,
        name: "湿度",
        color: "#4ecdc4",
        icon: "el-icon-water",
        alarmType: "湿度告警",
        apiType: 1
    },
    {
        id: 5,
        name: "压力",
        color: "#45b7d1",
        icon: "el-icon-pressure",
        alarmType: "压力告警",
        apiType: 2
    },
    {
        id: 2,
        name: "红外",
        color: "#f9ca24",
        icon: "el-icon-infrared",
        alarmType: "红外告警",
        apiType: 3
    },
    {
        id: 1,
        name: "紫外",
        color: "#a55eea",
        icon: "el-icon-ultraviolet",
        alarmType: "紫外告警",
        apiType: 4
    }
])

// 当前选中的传感器
const selectedSensor = ref(sensorTypes.value[0])
import { moduleStore } from '../../store/module'
import { storeToRefs } from 'pinia'
import { tabStore } from '../../store/tab'
let module_store = moduleStore()
let { module_num } = storeToRefs(module_store)
let tob_store = tabStore()
let { todoList } = storeToRefs(tob_store)
// 移除饼图相关代码，只保留柱状图

// 报警的柱状图统计
import { columAlarmOption } from '../../utils/chart'
let colRef = ref()
let colPirture = reactive<any>("")

// 存储resize事件处理函数的引用
let resizeHandler: (() => void) | null = null

// 生命周期
onMounted(async () => {
    // 初始化echart图表对象
    initEcharts()
    // 渲染柱状图
    renderEchart()
    // 加载默认传感器数据
    await loadSensorData(selectedSensor.value)

    // 创建resize事件处理函数
    resizeHandler = () => {
        setTimeout(() => {
            if (colPirture && typeof colPirture.resize === 'function') {
                colPirture.resize()
            }
        }, 300)
    }
    
    // 添加事件监听器
    window.addEventListener('resize', resizeHandler)
})
// 初始化echart对象
const initEcharts = () => {
    colPirture = echarts.init(colRef.value) // 初始化柱状图
}
// 渲染echart图表
const renderEchart = () => {
    colPirture.setOption(getEnhancedColumnOption()) // 渲染美化后的柱状图
}

// 传感器选择函数
const selectSensor = async (sensor: any) => {
    selectedSensor.value = sensor
    currentName.value = sensor.name
    currentId.value = sensor.id

    // 获取选中传感器的数据并更新图表
    await loadSensorData(sensor)
}
onActivated(async () => {
    setTimeout(() => {
        // 重新进入组件时，确保图表正确resize
        if (colPirture && typeof colPirture.resize === 'function') {
            colPirture.resize()
        }
    }, 200);
    
    // 确保resize事件监听器存在
    if (!resizeHandler) {
        resizeHandler = () => {
            setTimeout(() => {
                if (colPirture && typeof colPirture.resize === 'function') {
                    colPirture.resize()
                }
            }, 300)
        }
        window.addEventListener('resize', resizeHandler)
    }
})

// 组件销毁时清理事件监听器
onUnmounted(() => {
    if (resizeHandler) {
        window.removeEventListener('resize', resizeHandler)
        resizeHandler = null
    }
    // 销毁echarts实例
    if (colPirture && typeof colPirture.dispose === 'function') {
        colPirture.dispose()
    }
})

// 加载传感器数据
const loadSensorData = async (sensor: any) => {
    try {
        const response = await proxy.$newAdminHttp.get(`/admin/getErrorStatsByType?type=${sensor.apiType}`)

        if (response && response.data && response.data.data.length > 0) {
            const axisData = response.data.data.map((item: any) => item.date)
            const seriesData = response.data.data.map((item: any) => item.count)

            // 更新柱状图数据
            updateEnhancedColumnChart({ dates: axisData, data: seriesData }, sensor)
        } else {
            // 显示默认数据
            updateEnhancedColumnChart({ dates: ["2024-1-16", "2024-1-17", "2024-1-18"], data: [0, 0, 0] }, sensor)
        }
    } catch (error) {
        console.error('获取传感器数据失败:', error)
        // 显示默认数据
        updateEnhancedColumnChart({ dates: ["2024-1-16", "2024-1-17", "2024-1-18"], data: [0, 0, 0] }, sensor)
    }
}

// 获取美化后的柱状图配置
const getEnhancedColumnOption = () => {
    return {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: selectedSensor.value.color,
            borderWidth: 1,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            },
            formatter: function (params: Record<string, any>[]) {
                return `${selectedSensor.value.name}报警<br/>${params[0].name}: ${params[0].value}次`
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ["2025-04-21", "2025-04-23", "2025-04-25"],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.1)'
                }
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            max: 60,
            interval: 20,
            minInterval: 20,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#666',
                fontSize: 12,
                hideOverlap: true
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.05)',
                    type: 'solid'
                }
            }
        },
        series: [{
            type: 'bar',
            data: [10, 22, 28],
            barWidth: '50%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: selectedSensor.value.color || '#4A90E2'
                    }, {
                        offset: 1,
                        color: (selectedSensor.value.color || '#4A90E2') + 'AA'
                    }]
                },
                borderRadius: [6, 6, 0, 0],
                shadowBlur: 15,
                shadowColor: `${selectedSensor.value.color || '#4A90E2'}40`,
                shadowOffsetY: 8
            },
            label: {
                show: true,
                position: 'top',
                color: '#333',
                fontSize: 16,
                fontWeight: 'bold'
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 25,
                    shadowColor: `${selectedSensor.value.color || '#4A90E2'}60`
                }
            }
        }]
    }
}

// 更新美化后的柱状图数据
const updateEnhancedColumnChart = (data: any, sensor: any) => {
    let target: number = Math.floor(data.data[0] ? data.data[0] : 10) + 40
    console.log(target)
    const option = {
        backgroundColor: 'transparent',
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: sensor.color,
            borderWidth: 1,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            axisPointer: {
                type: 'shadow',
                shadowStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            },
            formatter: function (params: Record<string, any>[]) {
                return `${sensor.name}报警<br/>${params[0].name}: ${params[0].value}次`
            }
        },
        grid: {
            top: '15%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.dates || ["2025-04-21", "2025-04-23", "2025-04-25"],
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.1)'
                }
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            max: function (value) {
                return Math.max(100, Math.ceil(value.max * 1.2 / 20) * 20);
            },
            interval: target,
            // minInterval: 20,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#666',
                fontSize: 12
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 0, 0, 0.05)',
                    type: 'solid'
                }
            }
        },
        series: [{
            type: 'bar',
            data: data.data || [10, 22, 28, 43, 49],
            barWidth: '50%',
            itemStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: sensor.color || '#4A90E2'
                    }, {
                        offset: 1,
                        color: (sensor.color || '#4A90E2') + 'AA'
                    }]
                },
                borderRadius: [6, 6, 0, 0],
                shadowBlur: 15,
                shadowColor: `${sensor.color || '#4A90E2'}40`,
                shadowOffsetY: 8
            },
            label: {
                show: true,
                position: 'top',
                color: '#333',
                fontSize: 16,
                fontWeight: 'bold'
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 25,
                    shadowColor: `${sensor.color || '#4A90E2'}60`
                }
            }
        }]
    }

    colPirture.setOption(option, true)
}
// todolist
let todoKeyword = ref("")
let todoType = ref("home.all")
let showTodoList = ref([]) // 显示的todolist
let { getUnDoneTodoList, getDoneTodoList, getAllTodoList } = storeToRefs(tob_store)
// 添加记录
const addTodo = () => {
    if (!todoKeyword.value) return proxy.$message.warning(proxy.$t("home.tipEnter"))
    // 生成唯一ID：使用时间戳 + 随机数确保唯一性
    const newId = Date.now() + Math.floor(Math.random() * 1000)
    proxy.$message.success(proxy.$t('home.addSuccess'))
    tob_store.addRecord({
        id: newId,
        title: todoKeyword.value,
        done: false
    })
    todoKeyword.value = ""
}
// 删除记录
const removeTodo = (id: number) => {
    // 直接传递 id 给 deleteRecord 方法
    tob_store.deleteRecord(id)
}

// 修改状态
const changeCheck = (id: number, done: boolean) => {
    tob_store.updateRecord(id, done)
}
// 查询记录
const queryTodo = (status: number) => {
    switch (status) {
        case 0: todoType.value = "home.all"; break;
        case 1: todoType.value = "home.uncompleted"; break;
        case 2: todoType.value = "home.finish"; break;
    }
}

/**系统指导 */
let open = ref(false)
let title = ref<string>('实时报警功能')
let description = ref<string>('滚动显示最新的报警信息')
const checkTarget = (targets: Itarget) => {
    open.value = true
    title.value = proxy.$t(targets.title)
    description.value = proxy.$t(targets.description)
}
interface Itarget {
    id: number
    name: string
    title: string
    description: string
    icon: string
}
let tourList: Array<Itarget> = [
    {
        id: 1,
        name: "home.name1",
        title: "home.title1",
        description: "home.desc1",
        icon: "Warning"
    },
    {
        id: 2,
        name: "home.name2",
        title: "home.title2",
        description: "home.desc2",
        icon: "TrendCharts"
    },
    {
        id: 3,
        name: "home.name3",
        title: "home.title3",
        description: "home.desc3",
        icon: "Histogram"
    },
    {
        id: 4,
        name: "home.taskList",
        title: "home.title4",
        description: "home.desc4",
        icon: "List"
    }
]    
</script>
 
 <style lang="less" scoped>
  #todo_num {
    display: flex;
    align-items: center;
    width: 200px!important;
}
 .el-tour__popup {
    max-width: 250px !important;
    min-width: auto !important;
    background-color: #303133 !important;
    color: white !important;
    border-radius: 4px !important;
}

.el-tour__header {
    display: none !important;
}

.el-tour__content {
    padding: 10px !important;
    font-size: 14px !important;
}

.el-tour__footer {
    padding: 0 10px 10px !important;
    justify-content: flex-end !important;
    border-top: none !important;
}

.el-tour__arrow::before {
    background: #303133 !important;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.right {
    display: flex !important;
    flex-direction: column;

    h1 {
        font-size: 20px;
        height: 30px;
        line-height: 30px;
    }

    .echart {
        flex: 1;
    }

    .right-pie {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .right-status {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.AdminHome {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 确保内容不溢出 */

    header {
        flex-shrink: 0;
        /* 防止 header 被压缩 */
        margin-bottom: 20px;

    }

    .main-scrollbar {
        flex-grow: 1;
        /* 占据剩余空间 */

        .content-wrapper {
            padding-bottom: 20px;
            /* 确保底部有足够的空间 */
        }
    }

    .el-container {
        width: 100%;
        display: flex;
        flex-direction: column;

        .el-row {
            width: 100%;
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    header {
        height: auto;
        min-height: 167px;
        display: flex;
        justify-content: space-between;
        padding: 20px 20px;
        margin-bottom: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 20px;
        .module {
            border: 1px solid #dfdfdf;
            background: #fff;
            border-color: rgba(80, 79, 79, 0.5);
            width: 24%;
            box-shadow: 4px 4px 40px rgba(168, 168, 168, 0.05);
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
            border-radius: 12px;

            .module_icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30%;

                img {
                    width: 80px;
                    height: 80px;
                }
            }

            .module_text {
                width: 65%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
                align-items: center;

                span {
                    font-size: 30px;
                    width: 150px;
                    height: 30px;
                    text-align: center;
                }

                .el-text {
                    font-size: 20px;
                }
            }
        }
    }
}

/**报警统计 */
.Alarm_statistics {
    height: 400px;
    padding: 15px;

    .new-chart-layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        gap: 20px;

        .sensor-legend-horizontal {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            .sensor-legend-item {
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                padding: 8px 16px;
                border-radius: 20px;
                transition: all 0.3s ease;
                background: rgba(255, 255, 255, 0.6);
                border: 2px solid transparent;

                &:hover {
                    background: rgba(255, 255, 255, 0.9);
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                }

                &.active {
                    background: rgba(255, 255, 255, 1);
                    border-color: #4A90E2;
                    box-shadow: 0 4px 16px rgba(74, 144, 226, 0.3);
                    transform: translateY(-2px);

                    .sensor-label {
                        font-weight: 600;
                        color: #333;
                    }
                }

                .sensor-color-dot {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    flex-shrink: 0;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
                }

                .sensor-label {
                    font-size: 14px;
                    color: #666;
                    transition: all 0.3s ease;
                    white-space: nowrap;
                }
            }
        }

        .chart-main-area {
            flex: 1;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            .echart_col {
                width: 100%;
                height: 100%;

                .el-col {
                    height: 100%;
                }

                .el-card {
                    height: 100%;
                }

                .el-container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .el-row {
                        width: 100%;
                        margin-bottom: 20px;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .chart-header {
            padding: 20px 25px 15px;
            background: rgba(255, 255, 255, 0.9);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);

            .chart-title {
                margin: 0 0 15px 0;
                font-size: 20px;
                font-weight: 600;
                color: #2c3e50;
                text-align: center;
            }

            .sensor-selector {
                display: flex;
                justify-content: center;
                gap: 15px;
                flex-wrap: wrap;

                .sensor-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 12px 16px;
                    border-radius: 10px;
                    background: rgba(255, 255, 255, 0.8);
                    border: 2px solid transparent;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    min-width: 80px;

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                        background: rgba(255, 255, 255, 0.95);
                    }

                    &.active {
                        border-color: #3498db;
                        background: rgba(52, 152, 219, 0.1);
                        transform: translateY(-2px);
                        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
                    }

                    .sensor-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 8px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

                        i {
                            font-size: 18px;
                            color: white;
                        }
                    }

                    .sensor-name {
                        font-size: 12px;
                        font-weight: 500;
                        color: #34495e;
                        text-align: center;
                    }
                }
            }
        }

        .echart_statistic {
            height: calc(100% - 120px);
            display: flex;
            padding: 20px;
            gap: 20px;

            .chart-statistics-legend-area {
                flex: 0 0 35%;
                /* 左侧区域占据35%的宽度 */
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .chart-statistics-bar-area {
                flex: 1;
                /* 右侧区域占据剩余空间 */
                height: 100%;

                .el-col {
                    height: 100%;
                }

                .el-container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;

                    .el-row {
                        width: 100%;
                        margin-bottom: 20px;

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }

            .echart_pie {
                background: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                padding: 10px;
            }

            .echart_col {
                background: rgba(255, 255, 255, 0.9);
                border-radius: 10px;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
                padding: 10px;
            }
        }
    }



    .card-header {
        font-size: 20px;
    }

    /** 统一卡片高度与布局（适用于功能引导卡和 todo 卡） */
    .consistent-height-card {
        display: flex;
        flex-direction: column;
        height: 420px; /* 固定统一高度，避免内容多少导致卡片塌陷 */
        box-sizing: border-box;
    }

    .consistent-height-card :deep(.el-card__header) {
        padding: 0 !important;
        height: 60px !important;
    }

    .consistent-height-card :deep(.el-card__body) {
        flex: 1 1 auto;               /* 让 body 自动填满剩余空间 */
        padding: 10px !important;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .consistent-height-card :deep(.el-card__footer) {
        padding: 0 !important;
        height: 30px;
        box-sizing: border-box;
        margin-top: 0;                /* 使用卡片容器的 Flex 布局来定位底部 */
    }

    /** 代办列表内容区域，仅作用于 ul.todo，避免与卡片类名冲突 */
    ul.todo {
        list-style-type: none;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /* 填充内容区，保证空状态和有内容时高度一致 */
    .todoList {
        flex: 1 1 auto;
        min-height: 0;                 /* 允许内部滚动，不挤压父容器 */
        display: flex;
        flex-direction: column;
    }

    .todoList ul {
        flex: 1 1 auto;
        min-height: 0;
    }

    .todoList .el-empty {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* 确保滚动区域在内容态下也能填满父容器 */
    .todoList :deep(.el-scrollbar) {
        height: 100%;
    }

    /** todoList 的底部 */
    #todo_footer {
        padding: 10px 15px;
        display: flex;
        align-items: center;
    }

    #todo_footer aside:last-child .el-button.is-text {
        padding: 8px 12px;
    }

    #todo_footer aside:last-child .el-button.is-text.is-active {
        background-color: #f0f9eb;
        color: #67c23a;
    }

    #todo_num {
        color: #909399;
        font-size: 14px;
    }

    :deep(#el_input) {
        &::-webkit-input-placeholder {
            color: #000 !important;
            font-size: 20px;
            padding-left: 10px;
            outline: none;
        }

        &::-moz-placeholder {
            color: #000 !important;
            font-size: 20px;
            padding-left: 10px;
            outline: none;
        }
    }

    /* 添加响应式布局优化 */
    @media (max-height: 800px) {
        .chart-grid {
            min-height: 250px;
            max-height: 300px;
        }

        header {
            min-height: 120px;

            .module {
                .module_text {
                    span {
                        font-size: 24px;
                    }

                    .el-text {
                        font-size: 16px;
                    }
                }

                .module_icon img {
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }

    @media (max-width: 1200px) {
        .AdminHome {
            padding: 15px;
        }

        header {
            flex-wrap: wrap;
            gap: 15px;

            .module {
                width: 48%;
                margin-bottom: 15px;
            }
        }
    }

    @media (max-width: 768px) {
        .AdminHome {
            padding: 10px;
        }

        header {
            .module {
                width: 100%;
                margin-bottom: 10px;
            }
        }

        :deep(.el-col) {
            margin-bottom: 15px;
        }
    }

    /* 确保el-container有足够的空间 */
    :deep(.el-container) {
        min-height: calc(100vh - 200px);
    }

    /* 优化el-row间距 - 移除重复定义 */
    :deep(.el-row) {
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    /* 自定义 el-scrollbar 样式 */
    :deep(.el-scrollbar) {
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }

        .el-scrollbar__bar.is-vertical {
            right: 2px;
            width: 8px;

            .el-scrollbar__thumb {
                background-color: rgba(144, 147, 153, 0.3);
                border-radius: 4px;

                &:hover {
                    background-color: rgba(144, 147, 153, 0.5);
                }
            }
        }
    }
}
#todo_footer {
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
       

        aside {
            height: 100%;
            display: flex;
            align-items: center;
            flex: 1;
            &:first-child {
                padding-left: 10px;
            }

            &:last-child {
                padding-right: 10px;
                justify-content: flex-end;
            }
        }
    }

    .chart-grid {
        height: 300px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;

        .host-item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;

            &:hover {
                background: #e3f2fd;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .img-icon {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #3587f0;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;
            }

            .host_name {
                color: #333;
                font-size: 16px;
                font-weight: 500;
                text-align: center;
                margin: 5px 0;
            }

            .host_num {
                color: #5f6dd5;
                font-size: 14px;
                text-align: center;
                margin: 0;
            }
        }
    }
 </style>